<template>
  <div class="home">
    <NavigationBar />
    
    <!-- Hero Section -->
    <section class="hero">
      <div class="container">
        <div class="hero-content">
          <h1 class="hero-title">
            <span class="gradient-text">AI驱动的</span>
            <br />智能穿搭体验
          </h1>
          <p class="hero-description">
            基于先进AI技术，为您提供个性化的虚拟试衣和穿搭建议，让每一次穿搭都成为艺术
          </p>
          <div class="hero-buttons">
            <router-link to="/fitting" class="btn btn-primary">
              <i class="fas fa-tshirt"></i>
              开始试衣
            </router-link>
            <router-link to="/recommend" class="btn btn-outline">
              <i class="fas fa-magic"></i>
              智能推荐
            </router-link>
          </div>
        </div>
        <div class="hero-image">
          <img src="@/assets/images/home.png" alt="虚拟试衣展示">
        </div>
      </div>
    </section>

    <!-- Features Section -->
    <section class="features">
      <div class="container">
        <h2 class="section-title">核心功能</h2>
        <div class="features-grid">
          <div class="feature-group">
            <div class="group-title">
              <i class="fas fa-tshirt"></i>
              <span>智能试衣</span>
            </div>
            <div class="feature-list">
              <div class="feature-item">
                <div class="feature-header">
                  <i class="fas fa-tshirt"></i>
                  <h3>AI 虚拟试衣 <i class="fas fa-fire"></i></h3>
                </div>
                <p>基于人工智能的虚拟试衣技术，实时展示穿搭效果</p>
                <div class="feature-tags">
                  <span>实时预览</span>
                  <span>3D 效果</span>
                </div>
              </div>
              <div class="feature-item">
                <div class="feature-header">
                  <i class="fas fa-tshirt"></i>
                  <h3>智能搭配</h3>
                </div>
                <p>根据个人风格和场合，智能推荐最佳搭配方案</p>
                <div class="feature-tags">
                  <span>风格匹配</span>
                  <span>场景推荐</span>
                </div>
              </div>
              <div class="feature-item">
                <div class="feature-header">
                  <i class="fas fa-shopping-cart"></i>
                  <h3>一键购买</h3>
                </div>
                <p>试穿满意后可直接跳转购买，省时省力</p>
                <div class="feature-tags">
                  <span>快速购买</span>
                  <span>优惠直达</span>
                </div>
              </div>
            </div>
          </div>

          <div class="feature-group">
            <div class="group-title">
              <i class="fas fa-user"></i>
              <span>个性化服务</span>
            </div>
            <div class="feature-list">
              <div class="feature-item">
                <div class="feature-header">
                  <i class="fas fa-heart"></i>
                  <h3>风格偏好</h3>
                </div>
                <p>记录并学习用户的穿搭偏好，提供个性化推荐</p>
                <div class="feature-tags">
                  <span>风格分析</span>
                  <span>智能推荐</span>
                  <span>偏好学习</span>
                </div>
              </div>
              <div class="feature-item">
                <div class="feature-header">
                  <i class="fas fa-history"></i>
                  <h3>穿搭记录 <i class="fas fa-fire"></i></h3>
                </div>
                <p>记录每次试穿和购买历史，打造专属衣橱</p>
                <div class="feature-tags">
                  <span>历史记录</span>
                  <span>搭配收藏</span>
                  <span>衣橱管理</span>
                </div>
              </div>
              <div class="feature-item">
                <div class="feature-header">
                  <i class="fas fa-bell"></i>
                  <h3>智能提醒</h3>
                </div>
                <p>根据季节和场合变化，智能提醒更新衣橱</p>
                <div class="feature-tags">
                  <span>季节提醒</span>
                  <span>场合推荐</span>
                </div>
              </div>
            </div>
          </div>

          <div class="feature-group">
            <div class="group-title">
              <i class="fas fa-cog"></i>
              <span>专业支持</span>
            </div>
            <div class="feature-list">
              <div class="feature-item">
                <div class="feature-header">
                  <i class="fas fa-ruler"></i>
                  <h3>尺码匹配 <i class="fas fa-fire"></i></h3>
                </div>
                <p>智能分析用户身材数据，精准推荐合适尺码</p>
                <div class="feature-tags">
                  <span>身材分析</span>
                  <span>尺码推荐</span>
                </div>
              </div>
              <div class="feature-item">
                <div class="feature-header">
                  <i class="fas fa-user-tie"></i>
                  <h3>时尚顾问</h3>
                </div>
                <p>专业时尚顾问在线指导，提供穿搭建议</p>
                <div class="feature-tags">
                  <span>专业指导</span>
                  <span>实时咨询</span>
                </div>
              </div>
              <div class="feature-item">
                <div class="feature-header">
                  <i class="fas fa-award"></i>
                  <h3>品质保障</h3>
                </div>
                <p>严格把控商品质量，确保试穿效果真实可靠</p>
                <div class="feature-tags">
                  <span>质量保证</span>
                  <span>真实效果</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Quick Actions Section -->
    <section class="quick-actions">
      <div class="container">
        <h2 class="section-title">快速开始</h2>
        <div class="actions-grid">
          <router-link to="/fitting" class="action-card">
            <div class="action-icon">
              <i class="fas fa-tshirt"></i>
            </div>
            <h3>虚拟试衣</h3>
            <p>体验AI驱动的3D虚拟试衣</p>
            <span class="action-arrow">
              <i class="fas fa-arrow-right"></i>
            </span>
          </router-link>
          <router-link to="/recommend" class="action-card">
            <div class="action-icon">
              <i class="fas fa-magic"></i>
            </div>
            <h3>智能推荐</h3>
            <p>获取个性化穿搭建议</p>
            <span class="action-arrow">
              <i class="fas fa-arrow-right"></i>
            </span>
          </router-link>
        </div>
      </div>
    </section>

    <PageFooter />
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import NavigationBar from '@/components/layout/NavigationBar.vue'
import PageFooter from '@/components/layout/PageFooter.vue'

export default defineComponent({
  name: 'HomePage',
  components: {
    NavigationBar,
    PageFooter
  }
})
</script>

<style scoped>
.home {
  min-height: 100vh;
  background: #f8f9fa;
}

.hero {
  padding: 120px 0;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  overflow: hidden;
}

.hero .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.hero-content {
  max-width: 600px;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 24px;
  color: #1a1a1a;
}

.gradient-text {
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-description {
  font-size: 1.25rem;
  line-height: 1.6;
  color: #4b5563;
  margin-bottom: 40px;
}

.hero-buttons {
  display: flex;
  gap: 16px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-primary {
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
  color: white;
  border: none;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(96, 165, 250, 0.2);
}

.btn-outline {
  background: transparent;
  border: 2px solid #60a5fa;
  color: #60a5fa;
}

.btn-outline:hover {
  background: rgba(96, 165, 250, 0.1);
  transform: translateY(-2px);
}

.hero-image {
  position: relative;
}

.hero-image img {
  width: 100%;
  height: auto;
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.features {
  padding: 80px 0;
  background: #f8f9fa;
}

.section-title {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 60px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.feature-group {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.group-title {
  padding: 20px;
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
  color: white;
  font-size: 1.25rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
}

.group-title i {
  font-size: 1.5rem;
}

.feature-list {
  padding: 20px;
}

.feature-item {
  padding: 20px;
  border-bottom: 1px solid #e5e7eb;
}

.feature-item:last-child {
  border-bottom: none;
}

.feature-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.feature-header i {
  color: #3b82f6;
  font-size: 1.25rem;
}

.feature-header h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.feature-header h3 .fa-fire {
  color: #f59e0b;
  font-size: 0.875rem;
}

.feature-item p {
  color: #4b5563;
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 12px;
}

.feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.feature-tags span {
  padding: 4px 8px;
  background: rgba(96, 165, 250, 0.1);
  color: #3b82f6;
  border-radius: 4px;
  font-size: 0.75rem;
}

.quick-actions {
  padding: 100px 0;
  background: #f8f9fa;
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.action-card {
  background: white;
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}

.action-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.action-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.action-icon i {
  font-size: 24px;
  color: white;
}

.action-card h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 16px;
}

.action-card p {
  color: #4b5563;
  line-height: 1.6;
  margin-bottom: 24px;
}

.action-arrow {
  margin-top: auto;
  color: #60a5fa;
  font-size: 1.25rem;
  transition: transform 0.3s ease;
}

.action-card:hover .action-arrow {
  transform: translateX(5px);
}

@media (max-width: 1200px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
}
</style> 